<script setup lang="ts">
  import { useForm } from '@/hooks/arco/useForm';
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import { getTestData } from '@/api/login';

  const editForm = useForm({
    state: {
      deviceId: '',
      name: '',
      productSn: '',
    },
    rules: {
      name: {
        required: true,
        message: '请输入设备名称',
      },
      productSn: {
        required: true,
        message: '请选择设备SN',
      },
    },
  });

  const editModal = useModeModalBinder({
    modes: ['edit', 'add', 'detail'] as const,
    renderTitle(mode) {
      if (mode === 'add') {
        return '新增';
      }
      if (mode === 'detail') {
        return '详情';
      }

      return '编辑';
    },
    onShow(mode, data) {
      if (mode === 'add') {
        editForm.resetFields();
      } else {
        editForm.setFieldsValue(data);
      }
    },
    async onOkClick(mode) {
      const data = editForm.state;

      if (mode === 'add') {
        return getTestData(data);
      }

      if (mode === 'detail') {
        return null;
      }

      return getTestData(data);
    },
  });

  defineExpose(editModal.expose);
</script>

<template>
  <a-modal v-bind="editModal.bindProps" width="700px">
    <a-form v-bind="editForm.bindProps" layout="vertical">
      <a-row>
        <a-col :span="24">
          <a-form-item field="name" label="设备名称">
            <a-input
              v-model="editForm.state.name"
              placeholder="请输入设备名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="productSn" label="设备编号">
            <a-input-number v-model="editForm.state.productSn" readonly />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<style lang="less" scoped></style>
